<template>
  <div v-if="visible" class="checkResult" @mousedown="startDrag" :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }">
    <el-button text @click="cancel()">X</el-button>
    <div style="padding:20px;">
      <div style="font-weight: bold;font-size: 20px;color: #333;border-bottom:1px solid #ccc;padding-bottom: 10px;">原文</div>
      <div v-html="content" style="margin-top: 10px;font-size: 16px;"></div>
    </div>
    <div style="padding:20px;">
      <div style="font-weight: bold;font-size: 20px;color: #333;border-bottom:1px solid #ccc;padding-bottom: 10px;">审核建议</div>
      <div v-for="item in resultList" :key="item.id" style="margin-top: 10px;font-size: 16px;">
        {{ item.secondLabelName }}：{{ item.cur }}
        <span v-if="item.correct">——>{{ item.correct }}</span>
        <span style="color: #ff9900;margin-left:20px;">{{ item.actionView }}</span>
      </div>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { reactive, ref } from 'vue'

const visible = ref(false)
const offsetX = ref(0) // 水平偏移量
const offsetY = ref(0) // 垂直偏移量
let isDragging = false // 是否正在拖拽
let startX = 0 // 鼠标按下时的初始 X 坐标
let startY = 0 // 鼠标按下时的初始 Y 坐标
const content = ref('')
const resultList = reactive([])

//弹窗初始化
const init = (textContent: any, result: any) => {
	visible.value = true
	content.value = textContent
    resultList.length = 0
	// 存储所有需要标红的字符串
	const toHighlight = []
	for (let e of result) {
		resultList.push(e)
		if (content.value?.includes(e.cur) && e.cur !== '') {
			// 收集需要标红的字符串
			toHighlight.push(e.cur)
		}
	}
	// 最后一次性替换所有目标字符串
	if (toHighlight.length > 0) {
		// 创建一个正则表达式，匹配所有需要标红的字符串
		const regex = new RegExp(toHighlight.map(escapeRegExp).join('|'), 'g')
		//replace可以用正则表达式进行匹配
		content.value = content.value.replace(regex, match => {
            //每匹配成功走一遍这个，不改变原字符串，只是把匹配到的字符串用<span>标签包裹起来
			return `<span style="background: red;">${match}</span>`
		})
	}
	// 辅助函数：转义正则表达式中的特殊字符
	function escapeRegExp(string) {
		return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
	}
}

const cancel = () => {
	visible.value = false
}
// 开始拖拽
const startDrag = (event: MouseEvent) => {
	isDragging = true
	startX = event.clientX - offsetX.value
	startY = event.clientY - offsetY.value

	// 监听鼠标移动和释放事件
	window.addEventListener('mousemove', onDrag)
	window.addEventListener('mouseup', stopDrag)
}

// 拖拽中
const onDrag = (event: MouseEvent) => {
	if (isDragging) {
		offsetX.value = event.clientX - startX
		offsetY.value = event.clientY - startY
	}
}

// 停止拖拽
const stopDrag = () => {
	isDragging = false
	window.removeEventListener('mousemove', onDrag)
	window.removeEventListener('mouseup', stopDrag)
}
defineExpose({
	init
})
</script>
<style lang="scss" scoped>
.checkResult {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 800px;
	height: 500px;
	background-color: #fff;
	z-index: 9999;
	//   display: flex;
	//   justify-content: center;
	//   align-items: center;
	box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
	overflow-y: auto;
	cursor: grab; /* 鼠标样式为抓取 */
	&:active {
		cursor: grabbing; /* 拖拽时鼠标样式为抓取中 */
	}
}
</style>
  